<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  //获取查询对象，后续通过它去检索元素
  const query = uni.createSelectorQuery();

  //执行检索的方法 单个元素
  query.select('.box').boundingClientRect((res) => {
    // console.log(res);
  });

  //多个元素的位置，尺寸信息
  query.selectAll('.box').boundingClientRect((resList) => {
    // console.log(resList);
  });

  //多个元素的位置，尺寸信息
  selectorQuery.selectViewport().boundingClientRect((rect) => {
    console.log(rect);
  });

  //执行 查询 exec （不执行这个，查询不了结果）
  query.exec();
});
</script>

<template>
  <view class="container">
    <view class="box">获取这个盒子的宽高、位置等信息</view>
    <view class="box">类选择器名称一样的另一个盒子</view>
  </view>
</template>

<style lang="scss">
.box {
  height: 100px;
  background-color: skyblue;
  margin-bottom: 20px;
  width: 375px;
}
</style>
